<!-- 登录页 -->
<template>
  <div class="login">
    <div class="login-block">
      <div class="login-entry">
        <h1 class="admin-login-title">CC-VIDEO 后台管理系统</h1>
      </div>

      <div class="login-form">
        <el-form
          ref="loginFormRef"
          :model="loginForm"
          :rules="rules"
          label-width="70px"
          class="login-box"
        >
          <el-form-item
            label="账号"
            prop="username"
          >
            <el-input
              v-model="loginForm.username"
              :maxlength="13"
              :prefix-icon="User"
              placeholder="请输入账号"
            />
          </el-form-item>

          <el-form-item
            label="密码"
            prop="password"
          >
            <el-input
              v-model="loginForm.password"
              type="password"
              :maxlength="20"
              :prefix-icon="Lock"
              placeholder="请输入密码"
              @keyup.enter="handleLoginBtn"
            />
          </el-form-item>

          <Verify
            ref="captchaRef"
            :captchaType="captchaType"
            :mode="mode"
            @success="captchaOnSuccess"
            @error="captchaOnError"
          />

          <el-form-item>
            <el-button
              :loading="loginLoading"
              type="primary"
              class="login-button"
              @click="handleLoginBtn"
            >
              {{ loginLoading ? '登录中...' : '登 录' }}
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, type FormInstance } from 'element-plus'
import { User, Lock } from '@element-plus/icons-vue'
import { LoginParams, login } from '@/api/login'
import { setAccessToken } from '@/utils/auth'
import Verify from '@/components/Verifition/src/Verify.vue'
import { useUserStoreWithOut } from '@/store/modules/user'

const userStore = useUserStoreWithOut()

const router = useRouter()
const loginFormRef = ref<FormInstance>()
const loginLoading = ref(false)

const captchaRef = ref(null)
const captchaType = ref('blockPuzzle')
const mode = ref('pop')

const loginForm = reactive<LoginParams>({
  username: '',
  password: '',
  captchaVerification: ''
})

const rules = {
  username: [
    {
      required: true,
      message: '账号不可为空',
      trigger: 'blur'
    }
  ],

  password: [
    {
      required: true,
      message: '密码不可为空',
      trigger: 'blur'
    }
  ]
}

const handleLoginBtn = async () => {
  if (!loginFormRef.value) return

  try {
    await loginFormRef.value.validate()

    if (captchaRef.value) {
      captchaRef.value.show()
    }
  } catch (error) {
    console.error('登录失败:', error)
  }
}

const captchaOnSuccess = (res: any) => {
  loginForm.captchaVerification = res.captchaVerification
  handleLogin()
}

const captchaOnError = () => {
  ElMessage.error('验证失败，请重试！')
}

const handleLogin = async () => {
  try {
    loginLoading.value = true

    const { userId, accessToken } = await login(loginForm)

    if (!userId || !accessToken) {
      return
    }

    await userStore.setUserId(userId)
    setAccessToken(accessToken)

    ElMessage.success('登录成功！')
    await router.push('/')
  } catch (error) {
    console.error('登录失败:', error)
  } finally {
    loginLoading.value = false
  }
}
</script>

<style lang="scss" scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  background: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);

  &-block {
    width: 500px;
    height: auto;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    padding: 20px;
  }

  &-entry {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
  }

  &-form {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3%;
    padding-right: 8%;
  }
}

:deep(.el-form-item) {
  margin-bottom: 25px;
}

.admin-login-title {
  margin: 10px;
  font-size: 25px;
  font-weight: bold;
  letter-spacing: 2px;
  background: linear-gradient(45deg, #4481eb, #04befe);
  -webkit-background-clip: text;
  color: transparent;
}

.login-button {
  width: 320px;
  height: 40px;
  font-size: 16px;
  letter-spacing: 8px;
}
</style>
